<!--  -->

<style lang='scss' type='stylesheet/scss' scoped>
@import "@/assets/scss/mixin.scss";
.buttons-warpper {
  background: #151515;
  height: 48px;
  padding: 10px;
  box-sizing: border-box;
  font-size: 0;
}
.triggler-bar {
  float: right;
  width: 56px;
  height: 28px;
  position: relative;
  display: flex;

  .column {
    &.default {
      background: #484848;
      .line {
        background: #eaeaea;
      }
    }
    &.active {
      background: white;
      .line {
        background: black;
      }
    }
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .line {
      width: 16px;
      height: 2px;
      margin-bottom: 4px;
      &:last-child {
        margin: 0;
      }
    }
  }
  .array {
    &.default {
      background: #484848;
      .box {
        border: solid 2px #eaeaea;
      }
    }
    &.active {
      background: white;
      .box {
        border: solid 2px black;
      }
    }
    width: 28px;
    height: 28px;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 4px;
    .box {
      border-radius: 2px;
      width: 4px;
      height: 4px;
      margin: 1px;
    }
  }
}
</style>

<template>
  <div class="buttons-warpper"
       @click="clearFiles">
    <el-upload class="upload-demo"
               hidden
               action="#"
               :before-upload="beforeFileUpload"
               multiple>
      <button ref="elUploadBtn">点击</button>
    </el-upload>
    <div class="p-header-button"
         @click.stop="uploadFile"><i class="el-icon-upload2"></i>上传</div>
    <div class="p-header-button"
         @click.stop="addFolder"><i class="el-icon-plus"></i>新建文件夹</div>
    <div class="p-header-button p-header-group"
         @click.stop="renameFile"
         v-if="checkFiles.length===1">重命名</div>
    <div class="p-header-button p-header-group"
         @click.stop="deleteFiles"
         v-if="checkFiles.length">删除</div>
    <div class="p-header-button p-header-group"
         @click.stop="copyTo"
         v-if="checkFiles.length">拷贝至</div>
    <div class="p-header-button p-header-group"
         @click.stop="moveTo"
         v-if="checkFiles.length">移动至</div>

    <div class="triggler-bar">
      <div class='column'
           @click.stop="trigglerSort('row')"
           :class="isRow?'active':'default'">
        <div class='line'
             v-for='i in 3'></div>
      </div>
      <div class='array'
           @click.stop="trigglerSort('box')"
           :class="!isRow?'active':'default'">
        <div class='box'
             v-for='i in 4'></div>
      </div>
    </div>
  </div>
</template>

<script type='text/ecmascript-6'>
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["checkFiles", "isRow"])
  },
  data() {
    return {};
  },
  created() {
    this.$store.dispatch(
      "file/trigglerDisplay",
      localStorage.getItem("display") || "row"
    );
  },
  methods: {
    // 清空 checkfiles
    clearFiles() {
      this.$store.commit("file/CLEAR_FILES");
    },
    // 模拟点击
    uploadFile() {
      this.$refs.elUploadBtn.click();
    },
    // 新增文件夹
    addFolder() {
      this.$emit("addFolder");
    },
    // 上传文件
    async beforeFileUpload(file) {
      this.$store.commit("file/ADD_UPLOAD_LIST", file);
      return false;
    },
    // 重命名
    renameFile() {
      this.$emit("rename");
    },
    // 删除文件
    async deleteFiles() {
      await this.$store.dispatch("file/deleteFileList", this.checkFiles);

      this.$notify.success({
        title: "成功",
        message: "成功"
      });
    },
    copyTo() {
      this.$emit("copyTo");
    },
    moveTo() {
      this.$emit("moveTo");
    },
    trigglerSort(isRow) {
      this.$store.dispatch("file/trigglerDisplay", isRow);
    }
  }
};
</script>
